<template>
    <div class="container">
        <error-tip :errorCode="errorCode" v-if="errorCode"></error-tip>
        <div v-else>
            <!-- 引入卡片组件 并使用 props 传递数据 （:data） -->
            <day-card :data="dayData"></day-card>
            <!-- 引入列表组件 并使用 props 传递数据 （:data） -->
            <day-list :data="dayData"></day-list>
        </div>
    </div>
</template>

<script>
// 导入onMounted 钩子函数 和 Computed 计算属性方法
import { onMounted,computed } from 'vue';

// 导入useStore 函数
import { useStore } from 'vuex';

// 导入API函数
import getData from '@/services';

// 引入获取当前日期的函数
import { getNowDate } from '@/libs/utils';

// 引入卡片组件
import DayCard from '@/components/DayPage/Card.vue';

// 引入列表组件
import DayList from '@/components/DayPage/List.vue';

export default {
    // setup 函数 做数据获取
    setup() {
        // 拿到vuex的store
        const store = useStore();
        // onMounted 钩子函数 它会在组件挂载到 DOM 之后被调用，这是一个非常适合进行数据获取、初始化操作（比如操作 DOM 元素等）的时机。
        onMounted(() => {
            // 定义field字段  拿到vuex的state中的field字段
            const field = store.state.field;
            // 调用API函数
            getData(store,field, getNowDate(field))
        });

        // 返回dayData数据  拿到vuex的state中的dayData字段  并返回给组件  组件就可以使用dayData数据了
        return {
            // dayData: store.state.dayData  // 如果这样返回，拿到的不是响应式数据，页面不会更新  所以要使用reactive函数  把dayData变成响应式数据

            // 使用computed函数  把dayData变成 ref 响应式数据
            dayData: computed(() => store.state.dayData),
            errorCode: computed(() => store.state.errorCode)
        }
    },
    // 注册组件
    components: {
        DayCard,
        DayList
    }
}
</script>

<style lang="less" scoped>   
</style>